<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="resources/layui/css/layui.css"/>
</head>
<body style="background-color: #eeeeee">
    <div class="layui-row">
        <ul class="layui-nav layui-col-lg10 layui-col-lg-offset1" lay-filter="">
            <li class="layui-nav-item layui-col-xs-3">
                <a href="https://gitee.com/wangxiaokuang/file-sharing" target="_blank">文件共享 By 王小狂</a>
            </li>
        </ul>
    </div>

    <div class="layui-row">
        <div class="layui-col-lg10 layui-col-lg-offset1">
            <table id="files_list" lay-filter="files_list" border="0"></table>
        </div>
    </div>
</body>

<script type="text/html" id="barDemo">
    {{# if(d.isDir){ }}
        <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="enter">进入目录</a>
    {{# }else{ }}
        <a class="layui-btn layui-btn-sm layui-btn-disabled">无法进入</a>
    {{# } }}

    <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-event="download">下载文件</a>
    <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-red copy_download_link_btn"  data-clipboard-text="{{ d.downloadLink }}" lay-event="copy_download_link">复制下载链接</a>
    <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-black" lay-event="display_qrcode">二维码</a>
</script>

<script src="resources/layui/layui.js"></script>
<script src="resources/clipboard/clipboard.js"></script>

<script>
    layui.use(['table','layer'],function(){
        let files_table = layui.table;

        files_table.render({
            title: "文件列表",
            elem: '#files_list',
            height: 'full',
            url: '/files/list?path=/',
            page: false,
            skin: ['line', 'row'],
            even: true,
            size: 'lg',
            cols: [[
                {field: 'ID', title: '序号', width: 80},
                {field: 'fileName', title: '文件名'},
                {field: 'fileSize', title: '文件大小', width: 120},
                {field: 'time', title: '最后修改时间', width: 200},
                {title: '操作', toolbar: '#barDemo'},
            ]]
        });
        files_table.on('tool(files_list)',function(obj){
            let data = obj.data;
            let download_link = data['downloadLink'];
            switch (obj.event) {
                case 'enter':
                    files_table.reload('files_list',{
                        url: '/files/list?path='+data['path'] + data['fileName']
                    });
                break;
                case 'copy_download_link':
                    function coppy_error(){
                        let copy = layui.layer;
                        copy.open({
                            type: 1,
                            title: '复制下载链接',
                            id: 'copy_download_link'+data["ID"],
                            content: '<div style="padding: 20px 40px;" id="link">'+ download_link +'</div>'
                        });
                    }
                    if (ClipboardJS.isSupported()){
                        let clipboard = new ClipboardJS('.copy_download_link_btn');
                        clipboard.on('success', function () {
                               layui.layer.msg('下载链接复制成功');
                        });
                        clipboard.on('error', function(){ coppy_error(); });
                    } else {
                        coppy_error()
                    }
                break;
                case 'download':
                    window.open(download_link)
                break;
                case 'display_qrcode':
                    let httpRequest = new XMLHttpRequest();
                    httpRequest.open('GET', data['qrCode'], true)
                    httpRequest.send()

                    httpRequest.onreadystatechange = function (){
                        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                            console.log(httpRequest.responseText)
                            var qrcode = layui.layer
                            qrcode.open({
                                  type:1,
                                  resize: false,
                                  title: data['fileName'],
                                  content: '<center><img src="' + httpRequest.responseText + '" style="width:250px; height:250px"/></center>'
                            });
                        }
                    };
                break;
            }
        });
    });
</script>
</html>